<template>
  <div id="wrap">
    <div id="subBar">
      <router-link to="/index/category">
        <img src="../../assets/images/logo.png" class="logo" alt="">
      </router-link>
      <div class="message">
          <p>欢迎您：{{username}}</p>
          <p>空闲桌位：{{freeTable}}桌</p>
          <p>正在点餐：{{orderingNum}}桌</p>
          <p>正在用餐：{{eatingNum}}桌</p>
          <p>当前桌子：{{currentTable}}</p>
      </div>
      <ul class="action">
          <li><router-link to="/index/orders"><i>{{orderedNum}}</i><span class="iconfont">&#xe607;</span>已点</router-link></li>
          <li><router-link to="/index/seats"><span class="iconfont">&#xe62e;</span>座位</router-link></li>
          <li @click="exit"><router-link to="/background"><span class="iconfont">&#xe602;</span>后台</router-link></li>
          <li @click="exit"><router-link to="/login"><span class="iconfont">&#xe66a;</span>退出</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
// import bus from '../../eventBus.js'
import { getUserInfoAPI } from '../../api/getUserInfoAPI.js'
import { getSeatInfoAPI } from '@/api/getSeatInfoAPI.js'
import { resetSeatAPI } from '@/api/resetSeatAPI.js'
import { getOrderDetailAPI } from '@/api/getOrderDetailAPI.js'
export default {
  data () {
    return {
      username: '',
      freeTable: 0,
      orderingNum: 0,
      eatingNum: 0,
      currentTable: '未选桌子',
      orderedNum: 0,
      avltimer: null
    }
  },
  methods: {
    async exit () {
      const token = localStorage.getItem('token')
      await resetSeatAPI(token)
    },
    async getUserInfo () {
      const token = localStorage.getItem('token')
      const { data: res } = await getUserInfoAPI(token)
      this.username = res.data.username
    },
    async getOrderDetail () {
      let orderResult = []
      const token = localStorage.getItem('token')
      const { data: res1 } = await getSeatInfoAPI(token)
      const orderingList = res1.data.filter(item => item.legend_class === 'ordering')
      this.freeTable = res1.data.filter(item => item.legend_class === '').length
      this.orderingNum = orderingList.length
      this.eatingNum = res1.data.filter(item => item.legend_class === 'eating').length
      const select = res1.data.find(item => item.is_selected === 1)
      const { data: res } = await getOrderDetailAPI(token)
      for (var i = 0; i < orderingList.length; i++) {
        orderResult.push({
          table_num: orderingList[i].seat_id,
          people_num: orderingList[i].people_num,
          order_num: orderingList[i].order_num,
          totalPrice: 0,
          dishes: res.data.filter(item => item.table_num === orderingList[i].seat_id)
        })
      }
      orderResult = orderResult.filter(item => item.dishes.length !== 0)
      this.orderedNum = orderResult.length
      if (!select) return
      this.currentTable = select.seat_id + '号桌'
    }
  },
  created () {
    this.avltimer = setInterval(() => {
      this.getUserInfo()
      this.getOrderDetail()
    }, 50)
  },
  beforeDestroy () {
    clearInterval(this.avltimer)
    this.avltimer = null
  }
}
</script>

<style scoped>
.router-link-active {
  color:#f9d163;
}
</style>
